<template>
  <pageHeaderNew
    :breadCrumb="['人事', '人事管理', '配置入职方案']"
    title="配置入职方案"
    :showBack="true"
  ></pageHeaderNew>
  <div class="main">
    <div class="hear">
      <a-steps changeable :current="current" @change="setCurrent">
        <a-step description="">手续基础信息 </a-step>
        <a-step description="">编辑手续内容 </a-step>
        <a-step description="">设置审核流程 </a-step>
        <a-step description="">确认发起 </a-step>
      </a-steps>
    </div>
    <div class="business" v-show="current === 1">
      <a-form style="width: 100%" ref="formRef" :model="form" auto-label-width>
        <a-form-item field="personnel" label="入职人员：" required>
          <a-input v-model="form.personnel" />
        </a-form-item>
        <a-form-item field="procedure" label="入职方案名称：">
          <a-input v-model="form.procedure" placeholder="请输入" />
        </a-form-item>
        <a-form-item required field="templateId" label="选择入职方案模板：">
          <a-select
            placeholder="请选择"
            @change="(e)=>templatechange(e as number)"
            :options="SelectOption"
            v-model="form.templateId"
            :style="{ width: '320px' }"
          >
          </a-select>
        </a-form-item>
        <a-form-item label="入职手续描述：">
          <a-textarea
            v-model="form.procedureRemark"
            placeholder="请输入"
            style="height: 200px"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </div>
    <div v-show="current === 2">
      <RenderTemplate
        :data="form.controls"
        type="editData"
        :isDisabled="false"
        :editBtnShow="false"
        :fieldNames="fieldNames"
      ></RenderTemplate>
    </div>
    <div v-show="current === 3" :style="{ width: '100%', margin: 'auto' }">
      <h2 style="text-align: center">入职方案审核流程</h2>
      <div class="head">
        <div class="sub-title">设置审核流程及相关规则</div>
      </div>
      <div style="padding: 20px">
        请选择入职审核流程：
        <a-select
          :style="{ width: '320px', marginRight: '20px' }"
          placeholder="请选择流程"
        >
        </a-select>
        <a-button type="primary">新增审核流程</a-button>
      </div>
      <a-table :columns="columns" :data="[]" />
    </div>
    <div v-show="current === 4" :style="{ width: '50%', margin: 'auto' }">
      <a-form :model="form" auto-label-width>
        <a-form-item field="personnel" label="入职人员：" required>
          <div class="avatar">
            <a-avatar :style="{ backgroundColor: '#b8d4ff' }">
              <IconUser :style="{ color: '#fff' }" />
            </a-avatar>
            <p>{{ form.personnel }}</p>
          </div>
        </a-form-item>
        <a-form-item field="procedure" label="入职方案名称：" required>
          <a-input v-model="form.procedure" />
        </a-form-item>
        <a-form-item label="入职方案模板名称：" required>
          <a-input v-model="templateName" />
        </a-form-item>
        <a-form-item field="xamineName" label="入职方案审核流程：" required>
          <a-input v-model="form.xamineName" />
        </a-form-item>
      </a-form>
    </div>
  </div>
  <div class="btn">
    <a-button
      v-show="current === 2 || current === 3 || current === 4"
      @click="current = --current"
      >上一步</a-button
    >
    <a-button
      type="primary"
      v-show="current === 1 || current === 2 || current === 3"
      @click="next"
      >下一步</a-button
    >
    <a-button v-show="current === 1" @click="current = 3">
      跳到审批流程
    </a-button>
    <a-button type="primary" v-show="current === 4" @click="submit">
      保存
    </a-button>
    <a-button
      type="primary"
      v-show="current === 3 || current === 4"
      @click="current = 1"
    >
      跳到基本信息
    </a-button>
  </div>
</template>
<script setup lang="ts">
import { isJSON } from '@/utils/isType';
import clonedeep from 'lodash.clonedeep';
import { GetWorkPlaceList } from '@/apis/management/organization/organizationManagement';
import {
  GetEntryScheme,
  GetonboardingById,
  GetEntrySchemeById,
  GetlistData
} from '@/apis/management/personnel/baseSetting/TransactionSetting';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
const visibleEvent = ref(false);
const router = useRouter();
const formRef = ref();
const onboardingId = router.currentRoute.value.query.id;
const userId = router.currentRoute.value.query.id as unknown as number;
const current = ref(1);
const setCurrent = (index: number) => {
  current.value = index;
};
const columns = [
  {
    title: '流程',
    dataIndex: 'name'
  },
  {
    title: '流程节点名称',
    dataIndex: 'salary'
  },
  {
    title: '节点人员姓名',
    dataIndex: 'address'
  },
  {
    title: '审批方式',
    dataIndex: 'email'
  },
  {
    title: '审批节点为空时',
    dataIndex: 'email'
  },
  {
    title: '操作',
    dataIndex: 'email'
  }
];
const fieldNames = {
  subCode: 'code',
  subName: 'name',
  subRelDetail: 'componentModel',
  sonName: 'ctlCnName',
  sonCode: 'ctlCode'
};
const form: any = reactive({
  name: '',
  remark: '',
  onboardingId: onboardingId,
  procedure: '',
  procedureRemark: '',
  personnel: '',
  controls: [],
  details: [],
  agents: [],
  templateId: undefined
});
const SelectOption: any = reactive([]);
const ctlCode = reactive<string[]>([]);
const codeValue = reactive<{ code: string; value: any }[]>([]);
const templatechange = async (e: number) => {
  const res: any = await GetEntrySchemeById({ id: e });
  res.forEach((ele: any) => {
    ele.componentModel.forEach((item: any) => {
      item.values = codeValue[ctlCode.indexOf(item.ctlCode)]?.value;
    });
  });
  form.controls = res;
  form.templateId = e;
  console.log(
    222222,
    SelectOption.filter((ele: any) => ele.value === form.templateId)[0]?.label
  );

  console.log(res, form);
};
const templateName = computed(
  () =>
    SelectOption.filter((ele: any) => ele.value === form.templateId)[0]?.label
);
const next = async () => {
  console.log(form);
  if (current.value === 1) {
    if (await formRef.value.validate()) {
      return Message.error('请填写必填项');
    }
  }
  current.value++;
};

const init = async () => {
  const resData: any = await GetonboardingById({
    id: +userId
  });
  resData[0].collections?.forEach((ele: any) => {
    ele.controls.forEach((item: any) => {
      if (item.controlValue) {
        if (isJSON(item.controlValue)) {
          item.controlValue = JSON.parse(item.controlValue);
        } else if (!isNaN(+item.controlValue)) {
          item.controlValue = Number(item.controlValue);
        }
      }
      ctlCode.push(item.ctlCode);
      codeValue.push({ code: item.ctlCode, value: item.controlValue });
      if (item.ctlCode === 'C62B8DC31189847E0972B5D8F721404B1')
        form.personnel = item.controlValue;
    });
  });
  const res: any = await GetEntryScheme({ page: 1, size: 100 });

  res.content.forEach((ele: any) => {
    SelectOption.push({ value: ele.id, label: ele.name });
  });
  console.log('SelectOption', SelectOption);
};

const submit = () => {
  Message.success('提交成功');
  router.back();
};
init();
</script>
<style lang="less" scoped>
.main {
  width: 80%;
  margin: auto;
  .hear {
    width: 70%;
    padding: 20px;
    margin: auto;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7);
  }
  .business {
    width: 60%;
    margin: auto;
    padding-right: 100px;
  }
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  border-top: 2px solid #f8f8f8;
  box-shadow: 0px -6px 2px rgb(0 0 0 / 2%);
}
:deep(.arco-btn) {
  margin-right: 20px;

  width: 120px;
}
.layout {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background-color: #f3f8fe;
    border-radius: 4px;
    margin-bottom: 20px;
    div {
      display: flex;
      align-items: center;

      span {
        margin: 0 20px;
        display: inline-block;
        width: 5px;
        height: 30px;
        background-color: #165dff;
      }
    }
  }
  .main {
    padding: 0 40px 20px 40px;
    .cn {
      width: 85%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .cn-main {
        display: flex;
        width: 45%;
        margin-bottom: 20px;
        align-items: center;
        span {
          width: 100px;
          text-align: end;
          margin-right: 20px;
        }

        .cn-input {
          flex: 1;
        }
      }
    }
  }
  .arco-upload-wrapper {
    flex: 0;
  }
}
.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20px;
  p {
    margin: 10px 10px 0 10px;
  }
}
.head {
  box-sizing: border-box;
  border-radius: 4px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f5f7fb;
  margin: 20px 0;
  .sub-title {
    padding: 10px;
    display: flex;
    align-items: center;
    .icon {
      border-radius: 4px;
      width: 6px;
      height: 70%;
      background-color: #3d7eff;
      height: 20px;
      padding: 0;
      margin: 3px 0;
      margin-right: 10px;
    }
  }
  .setting {
    color: #3d7eff;
    cursor: pointer;
  }
}
</style>
